<template>
    <div class="table-card">
        <div class="table-search">
            <el-input v-model="searchName" placeholder="请输入查询内容" clearable style="width: 220px; margin-right: 10px;" />
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="dialogVisible = true" style="margin-left:auto;">
                <el-icon style="vertical-align: middle; margin-right: 4px;"><Plus /></el-icon>
                添加
            </el-button>
        </div>
        <el-table :data="projectInfo.list" style="width: 100%" border stripe height="500">
            <el-table-column prop="name" label="项目名称" min-width="160" />
            <el-table-column prop="number" label="编号" width="90" align="center" />
            <el-table-column prop="money" label="投资金额" width="120" align="center">
                <template #default="scope">
                    <span>￥{{ Number(scope.row.money).toLocaleString() }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="起点/城市" width="100" align="center" />
            <el-table-column prop="duration" label="工期(月)" width="90" align="center" />
            <el-table-column prop="startTime" label="开工时间" width="120" align="center">
                <template #default="scope">
                    {{ formatDate(scope.row.startTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="竣工时间" width="120" align="center">
                <template #default="scope">
                    {{ formatDate(scope.row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="quantity" label="隧道数量" width="80" align="center" />
            <el-table-column prop="status" label="状态" width="80" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
                        {{ scope.row.status === '1' ? '完工' : '施工' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="180">
                <template #default="scope">
                    <el-tooltip class="item" effect="dark" :content="stripHtml(scope.row.remark)" placement="top">
                        <span>{{ stripHtml(scope.row.remark).slice(0, 20) }}{{ stripHtml(scope.row.remark).length > 20 ? '...' : '' }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                    <div class="table-actions">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)" plain>删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页开始 -->
        <div class="table-pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
            />
        </div>
        <!-- 分页结束 -->
    </div>

    <!-- 添加对话框开始 -->
    <el-dialog
        v-model="dialogVisible"
        title="添加项目"
        width="600px"
        :close-on-click-modal="false"
        class="add-dialog"
    >
        <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="90px" size="large">
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="addForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="编号" prop="number">
                <el-input v-model="addForm.number" autocomplete="off" />
            </el-form-item>
            <el-form-item label="投资金额" prop="money">
                <el-input v-model="addForm.money" autocomplete="off" />
            </el-form-item>
            <el-form-item label="起点/城市" prop="address">
                <el-input v-model="addForm.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="工期(月)" prop="duration">
                <el-input v-model="addForm.duration" autocomplete="off" />
            </el-form-item>
            <el-form-item label="开工时间" prop="startTime">
                <el-date-picker
                    v-model="addForm.startTime"
                    type="date"
                    placeholder="选择开工时间"
                    style="width: 100%;"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item label="竣工时间" prop="endTime">
                <el-date-picker
                    v-model="addForm.endTime"
                    type="date"
                    placeholder="选择竣工时间"
                    style="width: 100%;"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item label="隧道数量" prop="quantity">
                <el-input-number v-model="addForm.quantity" :min="1" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="addForm.status" placeholder="请选择状态" style="width: 100%;">
                    <el-option label="完工" value="1" />
                    <el-option label="施工" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="addForm.remark" type="textarea" :rows="2" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitAdd">确定</el-button>
        </template>
    </el-dialog>
    <!-- 添加对话框结束 -->

    <!-- 编辑对话框开始 -->
    <el-dialog
        v-model="editDialogVisible"
        title="编辑项目"
        width="600px"
        :close-on-click-modal="false"
        class="add-dialog"
    >
        <el-form :model="editForm" ref="editFormRef" label-width="90px" size="large" class="form-grid">
            <el-row :gutter="16">
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="editForm.name" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="编号" prop="number">
                        <el-input v-model="editForm.number" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="投资金额" prop="money">
                        <el-input v-model="editForm.money" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="起点/城市" prop="address">
                        <el-input v-model="editForm.address" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工期(月)" prop="duration">
                        <el-input v-model="editForm.duration" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隧道数量" prop="quantity">
                        <el-input-number v-model="editForm.quantity" :min="1" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开工时间" prop="startTime">
                        <el-date-picker
                            v-model="editForm.startTime"
                            type="date"
                            placeholder="选择开工时间"
                            style="width: 100%;"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="竣工时间" prop="endTime">
                        <el-date-picker
                            v-model="editForm.endTime"
                            type="date"
                            placeholder="选择竣工时间"
                            style="width: 100%;"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="editForm.status" placeholder="请选择状态" style="width: 100%;">
                            <el-option label="完工" value="1" />
                            <el-option label="施工" value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="editForm.remark" type="textarea" :rows="2" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitEdit">保存</el-button>
        </template>
    </el-dialog>
    <!-- 编辑对话框结束 -->
</template>

<script setup>
import api from "@/api/index.js"
import { onMounted, reactive, ref } from "vue";
import { Timer, Plus } from '@element-plus/icons-vue'
import { formatDate, stripHtml } from '@/utils/utils'
import { useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { number } from "echarts";

const route = useRoute()

const projectInfo = reactive({
    list:[]
})
const total = ref(0)
const currentPage = ref(1)
const searchName = ref('')
const pageSize = ref(6)
const dialogVisible = ref(false)
const addFormRef = ref()
const addForm = ref({
    name: '',
    number: '',
    money: '',
    address: '',
    duration: '',
    startTime: '',
    endTime: '',
    quantity: 1,
    status: '',
    remark: ''
})
const addRules = {
    name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    number: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    money: [{ required: true, message: '请输入投资金额', trigger: 'blur' }],
    address: [{ required: true, message: '请输入起点/城市', trigger: 'blur' }],
    duration: [{ required: true, message: '请输入工期', trigger: 'blur' }],
    startTime: [{ required: true, message: '请选择开工时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请选择竣工时间', trigger: 'change' }],
    quantity: [{ required: true, message: '请输入隧道数量', trigger: 'blur' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const editDialogVisible = ref(false)
const editFormRef = ref()
const editForm = ref({
  id: '',
  name: '',
  number: '',
  money: '',
  address: '',
  duration: '',
  startTime: '',
  endTime: '',
  quantity: 1,
  status: '',
  remark: ''
})

onMounted(() => {
  getTotal();
});

function getTotal(){
  api.getProjectTotal().then(res => {
    console.log(res);
    if(res.data.status === 200) {
      total.value = res.data.result[0]['count(*)']
    }
  }).catch(err => {
    console.log(err);
  })
}

onMounted(() => {
    http(currentPage.value)
});

const http = (page) =>{
    api.getProjectInfo({page}).then(res => {
        if(res.data.status === 200) {
            projectInfo.list = res.data.result
        }
    }).catch(err => {
        console.log(err);
    })
}

function handleEdit(row) {
  // 复制当前行数据到编辑表单
  Object.assign(editForm.value, row)
  editDialogVisible.value = true
}
function handleDelete(row) {
  api.getProjectDel({id:row.id})
  .then(res => { 
    if(res.data.status === 200) {
      ElMessage.success('删除成功')
      http(currentPage.value)
    } else {
      ElMessage.error('删除失败')
    }
  })
  getTotal();
}

function handleSearch() {
  //  字段模糊查询
  api.getProjectSearch({search: searchName.value}).then(res => { 
    console.log(res);
    if(res.data.status === 200) {
            projectInfo.list = res.data.result
        }
  }).catch(err => {
    console.log(err);
  })
}

function handleReset() {
  searchName.value = ''
  currentPage.value = 1
  http(currentPage.value)
}
function handlePageChange(page) {
  currentPage.value = page
  http(currentPage.value)
}


function submitAdd() {
  addFormRef.value.validate(valid => {
    if (valid) {
      // 提交逻辑
      api.getAddProject({
        name: addForm.value.name,
        number: addForm.value.number,
        money: addForm.value.money,
        address: addForm.value.address,
        duration: addForm.value.duration,
        startTime: addForm.value.startTime,
        endTime: addForm.value.endTime,
        quantity: addForm.value.quantity,
        status: addForm.value.status,
        remark: addForm.value.remark
      }).then(res => { 
        console.log(res);
        ElMessage({
        message: '添加成功',
        type: 'success',
        plain: true,
      })
        dialogVisible.value = false
        Object.keys(addForm.value).forEach(key => addForm.value[key] = key === 'quantity' ? 1 : '')
        currentPage.value = 1
        http(currentPage.value)
      }).catch(err => {
        console.log(err);
        ElMessage({
        message: err,
        type: 'error',
        plain: true,
      })
      })
    }
    getTotal()
  })
}

function submitEdit() {
  //调用api
  console.log(editForm.value);
  const id = editForm.value.id
  const params = {
    name: editForm.value.name,
        number: editForm.value.number,
        money: editForm.value.money,
        address: editForm.value.address,
        duration: editForm.value.duration,
        startTime: editForm.value.startTime,
        endTime: editForm.value.endTime,
        quantity: editForm.value.quantity,
        status: editForm.value.status,
        remark: editForm.value.remark
  }
  api.putProjectUpdate(id, params)
  .then(res => { 
    console.log(res);
    if(res.data.status === 200)
    {
      ElMessage({
        message: '更新成功',
        type: 'success',
        plain: true,
      })
      editDialogVisible.value = false
      http(currentPage.value)
    }
  }).catch(err => {
    console.log(err);
    ElMessage({
      message: '更新失败',
      type: 'error',
      plain: true,
    })
  })
}
</script>

<style scoped>
.table-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 10px 10px 10px 10px;
}
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
}
:deep(.el-table th) {
  background: #f5f7fa;
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
:deep(.el-table tr) {
  height: 52px;
}
:deep(.el-table__row:hover) {
  background: #e3f2fd !important;
}
:deep(.el-table .el-table__cell) {
  font-size: 15px;
}
.table-pagination {
  display: flex;
  justify-content: center;
  padding: 18px 0 0 0;
}
.table-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

:deep(.el-button--small) {
  min-width: 40px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 16px;
  height: 28px;
  line-height: 28px;
}

:deep(.el-button--primary) {
  background: #ecf5ff;
  color: #409eff;
  border: 1px solid #b3d8ff;
}
:deep(.el-button--primary):hover {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

:deep(.el-button--danger.is-plain) {
  background: #fff0f0;
  color: #f56c6c;
  border-color: #fbc4c4;
  border-radius: 16px;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  transition: background 0.2s, color 0.2s;
}
:deep(.el-button--danger.is-plain):hover {
  background: #f56c6c;
  color: #fff;
  border-color: #f56c6c;
}

.table-search {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 0 0 0;
  background: #f8fafc;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  padding-left: 16px;
  height: 54px;
}

:deep(.el-input__wrapper) {
  border-radius: 20px !important;
  box-shadow: none !important;
  border: 1px solid #e0e6ed;
  background: #fff;
  height: 38px;
  font-size: 15px;
}

:deep(.el-input__inner) {
  border-radius: 20px !important;
  height: 38px;
  font-size: 15px;
}

:deep(.el-button) {
  border-radius: 20px;
  height: 38px;
  font-size: 15px;
  margin-left: 10px;
  background: linear-gradient(90deg, #6ec6ff 0%, #2196f3 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08);
  transition: background 0.2s;
}
:deep(.el-button):hover {
  background: linear-gradient(90deg, #2196f3 0%, #6ec6ff 100%);
  color: #fff;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 50%;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 15px;
}
:deep(.el-pagination .el-pager li.active) {
  background: linear-gradient(90deg, #6ec6ff 0%, #2196f3 100%);
  color: #fff;
  border: none;
}

:deep(.el-button--success) {
  background: linear-gradient(90deg, #42e695 0%, #3bb2b8 100%);
  color: #fff;
  border: none;
}
:deep(.el-button--success):hover {
  background: linear-gradient(90deg, #3bb2b8 0%, #42e695 100%);
  color: #fff;
}

.add-dialog .el-dialog {
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.10);
}

.add-dialog .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 0;
}

.add-dialog .el-form {
  background: #f6faff;
  border-radius: 12px;
  padding: 8px 8px 0 8px;
}

.add-dialog .el-form-item {
  margin-bottom: 10px;
}

.add-dialog .el-form-item__label {
  font-size: 14px;
  color: #333;
  padding-right: 6px;
}

.add-dialog .el-input,
.add-dialog .el-input__wrapper,
.add-dialog .el-input__inner,
.add-dialog .el-select,
.add-dialog .el-date-editor,
.add-dialog .el-textarea__inner {
  min-height: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

.add-dialog .el-input-number {
  width: 100% !important;
}

.add-dialog .el-dialog__footer {
  padding-bottom: 10px;
}

.add-dialog .el-button {
  min-width: 64px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
}

.add-dialog .el-dialog__title {
  font-weight: bold;
  font-size: 18px;
  color: #2196f3;
  text-align: center;
  width: 100%;
  display: block;
}

.add-dialog :deep(.el-form-item__error) {
  color: #f56c6c !important;
  font-size: 13px !important;
  line-height: 1.2;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: none !important;
  box-shadow: none !important;
}

.el-message-box {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

:deep(.el-message-box) {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
  margin: 0 !important;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.10);
  min-width: 340px;
}

:deep(.el-message-box__title) {
  font-size: 18px;
  font-weight: bold;
  color: #2196f3;
}

:deep(.el-message-box__content) {
  font-size: 15px;
  color: #333;
  padding: 12px 0 18px 0;
}

:deep(.el-message-box__btns .el-button) {
  border-radius: 18px;
  min-width: 72px;
  font-size: 15px;
  height: 36px;
}

:deep(.el-message-box__btns .el-button--primary) {
  background: linear-gradient(90deg, #6ec6ff 0%, #2196f3 100%);
  color: #fff;
  border: none;
}
:deep(.el-message-box__btns .el-button--primary):hover {
  background: linear-gradient(90deg, #2196f3 0%, #6ec6ff 100%);
}
</style>